import React, { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import {
  Button,
  Input,
  Row,
  Col,
  Form,
  FormItem,
  TextArea,
  ImagePreview,
} from "@nutui/nutui-react-taro";
import Drivingup from "@/assets/Drivingup.png";
import Driving from "@/assets/Driving.png";
import CardFront from "@/assets/CardFront.png";
import CardBack from "@/assets/CardBack.png";
import business from "@/assets/business1.png";
import { Close } from "@nutui/icons-react-taro";
import "./index.less";
import AuthUtil from "../../utils/api/auth";
import { startEid } from "../../..//mp_ecard_sdk/main";

// 定义用户信息的类型
interface UserInfo {
  name: string;
  gender: string;
  ethnicity: string;
  birthDate: string;
  idNumber: string;
  contactAddress: string;
}

function DrivingLicense() {
  const instance = Taro.getCurrentInstance();
  const formData = instance?.router?.params?.value;
  const params = formData ? JSON.parse(formData || ("{}" as string)) : {};
  console.log(params.id, "params");
  const initialFormData = params.formData
    ? JSON.parse(params.formData || "{}")
    : {}; // 解析传递的 formData

  const [drivingLicenseFront, setDrivingLicenseFront] = useState(null);
  const [drivingLicenseBack, setDrivingLicenseBack] = useState(null);
  const [idCardFront, setIdCardFront] = useState(null);
  const [idCardBack, setIdCardBack] = useState(null);
  const [images, setImages] = useState<string[]>([]); // 这里指定了类型为字符串数组
  const [showPreview, setShowPreview] = useState(false);
  const [drivingLicenseFrontId, setDrivingLicenseFrontId] = useState(null);
  const [drivingLicenseBackId, setDrivingLicenseBackId] = useState(null);
  const [idCardFrontId, setIdCardFrontId] = useState(null);
  const [idCardBackId, setIdCardBackId] = useState(null);
  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
  const [businessLicenseImage, setBusinessLicenseImage] = useState<
    string | null
  >(null);
  const [willingness, setWillingness] = useState<string | null>(null);
  const [vehicleRegistration, setVehicleRegistration] = useState<string | null>(
    null
  );
  const [businessLicenseImageId, setBusinessLicenseImageId] = useState<
    string | null
  >(null);
  const [willingnessId, setWillingnessId] = useState<string | null>(null);
  const [vehicleRegistrationId, setVehicleRegistrationId] = useState<
    string | null
  >(null);
  const [form] = Form.useForm();
  React.useEffect(() => {
    if (initialFormData) {
      form.setFieldsValue(initialFormData);
    }
  }, [initialFormData, form]);
  const submitFailed = (error: any) => {
    // Taro.showToast({ title: JSON.stringify(error), icon: 'error' });
  };
  useEffect(() => {
    // const form_cache = Taro.getStorageSync('processed_data')
    // 直接调用getFormValues方法获取表单数据
    getFormValues().then((formData) => {
      if (formData) {
        form.setFieldsValue(formData);
        form.setFieldsValue({
          name: formData.realName,
        });
        setDrivingLicenseFront(
          formData.vehicleRegistrationCertificateFront?.url || ""
        );
        setDrivingLicenseFrontId(
          formData.vehicleRegistrationCertificateFront?.id || ""
        );
        setDrivingLicenseBack(
          formData.vehicleRegistrationCertificateBack?.url || ""
        );
        setDrivingLicenseBackId(
          formData.vehicleRegistrationCertificateBack?.id || ""
        );
        setIdCardFront(formData.identityFront?.url || "");
        setIdCardFrontId(formData.identityFront?.id || "");
        setIdCardBack(formData.identityBack?.url || "");
        setIdCardBackId(formData.identityBack?.id || "");
        setBusinessLicenseImage(formData.businessLicenseImage?.url || "");
        setBusinessLicenseImageId(formData.businessLicenseImage?.id || "");
        setWillingness(formData.willingness?.url || "");
        setWillingnessId(formData.willingness?.id || "");
        setVehicleRegistration(formData.vehicleRegistration?.url || "");
        setVehicleRegistrationId(formData.vehicleRegistration?.id || "");
      }
      /*            else if(form_cache){
              form.setFieldsValue(form_cache.form)
              form.setFieldsValue({
                name: form_cache.realName
              })
              setDrivingLicenseFront(form_cache.drivingLicenseFront );
              setDrivingLicenseFrontId(form_cache.drivingLicenseFrontId );
              setDrivingLicenseBack(form_cache.drivingLicenseBack );
              setDrivingLicenseBackId(form_cache.drivingLicenseBackId );
              setIdCardFront(form_cache.idCardFront);
              setIdCardFrontId(form_cache.idCardFrontId);
              setIdCardBack(form_cache.idCardBack );
              setIdCardBackId(form_cache.idCardBackId );
              setVehicleRegistration(form_cache.vehicleRegistration );
              setVehicleRegistrationId(form_cache.vehicleRegistrationId );
            } */
    });

    // 获取表单数据的函数
  }, []);

  const getFormValues = async () => {
    try {
      const { data } = await AuthUtil.getForm(params.id); // 假设params.id是已知的
      console.log(data, "data");
      if (data) {
        return data; // 返回获取到的表单数据
      }
    } catch (error) {
      console.error(error);
      Taro.showToast({
        title: "获取数据失败，请重试",
        icon: "none",
      });
    }
  };
  const extractBirthDate = (idCard) => {
    // 正则表达式匹配身份证号码中的出生日期
    const regex = /(\d{6})(\d{8})(\d{3})/; // 6位地区码 + 8位出生日期 + 3位顺序码
    const match = idCard.match(regex);

    if (match) {
      const birthDate = match[2]; // 获取出生日期部分
      const year = birthDate.substring(0, 4); // 前4位为年份
      const month = parseInt(birthDate.substring(4, 6), 10); // 第5、6位为月份
      const day = parseInt(birthDate.substring(6, 8), 10); // 第7、8位为日期

      // 格式化输出
      return `${year}/${month}/${day}`;
    }
    return "";
  };
  const fetchEidResult = async (token, value) => {
    //

    const formData = {
      eidToken: token,
    };

    const response = await AuthUtil.EidResult(formData);

    // await Taro.request({
    //     url: 'https://chf.lven.tech/api/sdk/eid_result',
    //     method: 'POST',
    //     header: {
    //         'Content-Type': 'application/json',
    //     },
    //     data: {
    //         eidToken: token
    //     }

    // });

    if (response.Text) {
      const eidResult = response; // 假设返回的数据就是 eid result

      const idInfo = extractBirthDate(value.identityNumber);
      console.log("EID Result:", eidResult.Text, idInfo);
      if (eidResult.Text.ErrMsg === "本次流程未完成") {
        return Taro.showToast({
          title: eidResult.Text.ErrMsg,
          icon: "none",
        });
      }
      if (idInfo === eidResult.Text.OcrBirth) {
        submitSucceed(value);
      } else {
        Taro.showToast({
          title: "身份证信息不一致",
          icon: "none",
        });
      }
    }
  };

  const goSDK = (token, value) => {
    startEid({
      data: {
        token,
      },
      verifyDoneCallback(res) {
        const { token, verifyDone } = res;
        if (verifyDone) {
          fetchEidResult(token, value);
        } else {
          Taro.showToast({
            title: "核身失败",
            icon: "none",
          });
        }
        console.log("收到核身完成的res:", res);
        console.log("核身的token是:", token);
        console.log("是否完成核身:", verifyDone);
      },
    });
  };
  const showToast = (title) => {
    Taro.showToast({ title, icon: "none" });
  };

  const areAllImagesUploaded = () => {
    return (
      drivingLicenseFront && drivingLicenseBack && idCardFront && idCardBack
    );
  };

  const getMissingUploads = () => {
    return [
      !drivingLicenseFront && "行驶证正面",
      !drivingLicenseBack && "行驶证反面",
      !idCardFront && "身份证正面",
      !idCardBack && "身份证反面",
    ].filter(Boolean); // 过滤掉未上传的项
  };

  const fetchEidToken = async (value) => {
    // 在这里进行校验
    if (!areAllImagesUploaded()) {
      const missingUploads = getMissingUploads();
      showToast(`请上传以下图片: ${missingUploads.join(", ")}`);
      return; // 终止后续操作
    }

    // 校验姓名是否匹配
    if (initialFormData.name !== initialFormData.realName) {
      showToast("行驶证姓名跟身份证不匹配");
      return; // 终止后续操作
    }

    try {
      const response = await AuthUtil.EidToken();
      if (response.EidToken) {
        const eidToken = response.EidToken; // 假设返回的数据就是 eid token
        console.log("EID Token:", eidToken);
        goSDK(eidToken, value);
      } else {
        showToast("获取 EID Token 失败");
      }
    } catch (error) {
      console.error("请求 EID Token 失败:", error);
      showToast("请求 EID Token 失败");
    }
  };

  const submitSucceed = async (values) => {
    if (!areAllImagesUploaded()) {
      const missingUploads = getMissingUploads();
      showToast(`请上传以下图片: ${missingUploads.join(", ")}`);
      return; // 终止后续操作
    }

    // 所有图片都已上传，准备数据
    console.log(values, "initialFormData");

    const formData = {
      ...initialFormData, // 合并传递的参数
      ...values,
      identityFront: idCardFrontId,
      identityBack: idCardBackId,
      vehicleRegistration: vehicleRegistrationId,
      vehicleRegistrationCertificateFront: drivingLicenseFrontId,
      vehicleRegistrationCertificateBack: drivingLicenseBackId,
      orderStatus: 2,
    };

    // 仅在存在值时添加可选字段
    if (businessLicenseImageId) {
      formData.businessLicenseImage = businessLicenseImageId;
    }

    if (willingnessId) {
      formData.willingness = willingnessId;
    }

    if (formData.name !== formData.realName) {
      return showToast("行驶证姓名跟身份证不匹配");
    }

    // 显示 loading
    Taro.showLoading({ title: "提交中..." });

    try {
      const { data } = await AuthUtil.editForm(formData, params.id);
      console.log(data, "data");

      if (data) {
        // 请求成功，隐藏 loading
        Taro.hideLoading();
        Taro.showToast({
          title: "等待审核",
          icon: "success",
        });
      } else {
        // 请求失败，隐藏 loading
        Taro.hideLoading();
        Taro.showToast({
          title: "请求参数错误",
          icon: "none",
        });
      }
    } catch (error) {
      console.error(error);
      // 请求失败，隐藏 loading
      Taro.hideLoading();
      Taro.showToast({
        title: "请求失败，请重试",
        icon: "none",
      });
      // 不需要 finally 块，因为已经在 try 和 catch 中处理了 loading
    }
  };

  const handleImageSelectOcr = (setType, type: string) => {
    Taro.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: (res) => {
        const imagePath = res.tempFiles[0].path;
        setType(imagePath); // 更新图片路径
        // 读取图片文件并转换为base64
        Taro.getFileSystemManager().readFile({
          filePath: imagePath,
          encoding: "base64",
          success: (data) => {
            const imageBase64: any = data.data;
            // convertImageToTempFile(imagePath, type);
            uploadFile(imagePath, type);
            Taro.showToast({
              title: "OCR识别加载中",
              icon: "loading",
              duration: 10000, // 持续显示
            });

            // 根据类型设置请求的URL和参数
            let url;
            let requestData = {};

            if (type.startsWith("id")) {
              // 身份证
              url = "https://chf.lven.tech/api/ocr";
              requestData = {
                image: imageBase64,
                id_card_side: type === "idFront" ? "front" : "back", // 根据正反面设置
              };
            } else if (type.startsWith("driving")) {
              // 行驶证
              url = "https://chf.lven.tech/api/ocr/vehicle_license";
              requestData = {
                image: imageBase64,
                side: type === "drivingFront" ? "front" : "back", // 根据正反面设置
              };
            } else {
              Taro.showToast({
                title: "不支持的类型",
                icon: "none",
              });
              return;
            }

            // 调用OCR服务
            Taro.request<OCRResponse>({
              url: url,
              method: "POST",
              data: requestData,
              header: {
                "Content-Type": "application/json",
              },
            })
              .then((response) => {
                Taro.hideToast();

                if (response.statusCode === 200 && response.data.words_result) {
                  const result = response.data.words_result;

                  // 更新用户信息
                  setUserInfo({
                    name: result["姓名"]?.words || "",
                    gender: result["性别"]?.words || "",
                    ethnicity: result["民族"]?.words || "",
                    birthDate: result["出生"]?.words || "",
                    idNumber: result["公民身份号码"]?.words || "",
                    contactAddress: result["住址"]?.words || "",
                  });

                  if (type === "idFront") {
                    // 更新表单值
                    form.setFieldsValue({
                      realName: result["姓名"]?.words || "",
                      identityNumber: result["公民身份号码"]?.words || "",
                      contactAddress: result["住址"]?.words || "",
                    });
                  } else if (type === "drivingFront") {
                    form.setFieldsValue({
                      plateNumber: result["号牌号码"]?.words || "",
                      vehicleIdentificationNumber:
                        result["车辆识别代号"]?.words || "",
                      engineNumber: result["发动机号码"]?.words || "",
                      brandModel: result["品牌型号"]?.words || "",
                      vehicleType: result["车辆类型"]?.words || "",
                      name: result["所有人"]?.words || "",
                    });
                  } else if (type === "drivingBack") {
                    form.setFieldsValue({
                      ratedCapacity: Number(result["核定载人数"]?.words) || "",
                    });
                  }
                } else {
                  Taro.showToast({
                    title: `OCR 识别失败，状态码：${response.statusCode}`,
                    icon: "none",
                  });
                }
              })
              .catch((error) => {
                console.error("OCR 识别错误:", error);
                Taro.showToast({
                  title: "网络请求失败，请检查网络",
                  icon: "none",
                });
              });
          },
          fail: (err) => {
            console.error("读取图片文件失败", err);
            Taro.showToast({
              title: "读取图片文件失败",
              icon: "none",
            });
          },
        });
      },
      fail: (err) => {
        console.error("选择图片失败", err);
        Taro.showToast({
          title: "选择图片失败",
          icon: "none",
        });
      },
    });
  };
  const handleImageSelect = (setType: (url: string) => void, type: string) => {
    Taro.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: (res) => {
        const imagePath = res.tempFiles[0].path;
        setType(imagePath); // 更新图片路径
        uploadFile(imagePath, type);
      },
      fail: (err) => {
        console.error("选择图片失败", err);
        Taro.showToast({
          title: "选择图片失败",
          icon: "none",
        });
      },
    });
  };
  const uploadFile = (filePath, type) => {
    AuthUtil.uploadFile(filePath).then((res: any) => {
      if (res.id) {
        const imagePath = res.url;
        const imageId = res.id;
        console.log(type, imagePath);
        if (type == "drivingFront") {
          setDrivingLicenseFront(imagePath);
          setDrivingLicenseFrontId(imageId);
        } else if (type == "drivingBack") {
          setDrivingLicenseBack(imagePath);
          setDrivingLicenseBackId(imageId);
        } else if (type == "idFront") {
          setIdCardFront(imagePath);
          setIdCardFrontId(imageId);
        } else if (type == "idBack") {
          setIdCardBack(imagePath);
          setIdCardBackId(imageId);
        } else if (type === "businessLicenseImage") {
          setBusinessLicenseImage(imagePath);
          setBusinessLicenseImageId(imageId);
        } else if (type === "willingness") {
          setWillingness(imagePath);
          setWillingnessId(imageId);
        } else if (type === "vehicleRegistration") {
          setVehicleRegistration(imagePath);
          setVehicleRegistrationId(imageId);
        }
      }

      /*             console.log({
              form: form.getFieldsValue(true),
              // 身份证正面
              idCardFront,
              idCardFrontId,
              // 身份证反面
              idCardBack,
              idCardBackId,
              // 行驶证正面
              drivingLicenseFront,
              drivingLicenseFrontId,
              // 行驶证反面
              drivingLicenseBack,
              drivingLicenseBackId,
              // 汽车登记证书
              vehicleRegistration,
              vehicleRegistrationId,
            },'res1')

            Taro.setStorageSync('processed_data', {
              form: form.getFieldsValue(true),
              // 身份证正面
              idCardFront,
              idCardFrontId,
              // 身份证反面
              idCardBack,
              idCardBackId,
              // 行驶证正面
              drivingLicenseFront,
              drivingLicenseFrontId,
              // 行驶证反面
              drivingLicenseBack,
              drivingLicenseBackId,
              // 汽车登记证书
              vehicleRegistration,
              vehicleRegistrationId,
            }); */
    });
  };
  const handleClearBusiness = (type) => {
    if (type === "businessLicenseImage") {
      setBusinessLicenseImage(null);
      setBusinessLicenseImageId(null);
    } else if (type === "willingness") {
      setWillingness(null);
      setWillingnessId(null);
    } else if (type === "vehicleRegistration") {
      setVehicleRegistration(null);
      setVehicleRegistrationId(null);
    }
  };
  const handleClearIdcar = (type) => {
    if (type === "idFront") {
      setIdCardFront(null);
      form.setFieldsValue({
        realName: "",
        identityNumber: "",
        contactAddress: "",
      }); // 重置相关的输入字段
    } else if (type === "idBack") {
      setIdCardBack(null);
    }
  };

  const handleClear = (type) => {
    if (type === "drivingFront") {
      setDrivingLicenseFront(null);
      form.setFieldsValue({
        plateNumber: "",
        vehicleIdentificationNumber: "",
        engineNumber: "",
        brandModel: "",
        vehicleType: "",
        name: "",
      }); // 重置相关的输入字段
    } else if (type === "drivingBack") {
      setDrivingLicenseBack(null);
    }
  };
  const handleImage = (value) => {
    setImages([{ src: value }]);
    setShowPreview(true);
  };
  return (
    <View className="driving-license">
      <ImagePreview
        autoPlay
        images={images}
        closeIcon
        visible={showPreview}
        onClose={() => setShowPreview(false)}
        indicator
      />
      <Row>
        <Col className="font-bold">行驶证</Col>
      </Row>
      <div className="driving">
        <div className="driving_img">
          {!drivingLicenseFront ? (
            <div className="driving_name">点击上传行驶证主页</div>
          ) : (
            ""
          )}
          {drivingLicenseFront ? (
            <>
              <div
                className="clear_btn"
                onClick={() => handleClear("drivingFront")}
              >
                <Close />
              </div>
              <Image
                className="car_info"
                src={drivingLicenseFront}
                onClick={() => {
                  handleImage(drivingLicenseFront);
                }}
              />
            </>
          ) : (
            <Image
              className="car_info"
              src={Drivingup}
              onClick={() =>
                handleImageSelectOcr(setDrivingLicenseFront, "drivingFront")
              }
            />
          )}
        </div>
        <div className="driving_img">
          {!drivingLicenseBack ? (
            <div className="driving_name">点击上传行驶证副页</div>
          ) : (
            ""
          )}
          {drivingLicenseBack ? (
            <>
              <div
                className="clear_btn"
                onClick={() => handleClear("drivingBack")}
              >
                <Close />
              </div>
              <Image
                className="car_info"
                src={drivingLicenseBack}
                onClick={() => {
                  handleImage(drivingLicenseBack);
                }}
              />
            </>
          ) : (
            <Image
              className="car_info"
              src={Driving}
              onClick={() =>
                handleImageSelectOcr(setDrivingLicenseBack, "drivingBack")
              }
            />
          )}
        </div>
      </div>
      <Row>
        <View
          className="driving_bottom"
          style={{ whiteSpace: "nowrap", fontSize: "26rpx" }}
        >
          <View>请确保证件</View>
          <View style={{ color: "#1c8cdf" }}>
            边框完整无遮挡、内容清晰无反光
          </View>
        </View>
      </Row>

      <Row>
        <Form
          form={form}
          divider
          labelPosition="left"
          onFinish={(values) => fetchEidToken(values)}
          onFinishFailed={(values, errors) => submitFailed(errors)}
          footer={
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                width: "100%",
              }}
            >
              <Button className="form_buttom" nativeType="reset">
                重置
              </Button>
              <Button
                className="form_buttom"
                nativeType="submit"
                type="primary"
                style={{ marginLeft: "20px", background: "#009afa" }}
              >
                提交修改
              </Button>
            </div>
          }
        >
          <FormItem
            label="车辆牌号"
            name="plateNumber"
            rules={[{ required: true, message: "请输入车辆牌号" }]}
          >
            <Input placeholder="请输入车辆牌号" type="text" />
          </FormItem>
          <FormItem
            label="车辆识别代码"
            name="vehicleIdentificationNumber"
            rules={[{ required: true, message: "请输入车辆识别代码" }]}
          >
            <Input placeholder="请输入车辆识别代码" type="text" />
          </FormItem>
          <FormItem
            label="发动机号码"
            name="engineNumber"
            rules={[{ required: true, message: "请输入发动机号码" }]}
          >
            <Input placeholder="请输入发动机号码" type="text" />
          </FormItem>
          <FormItem
            label="品牌型号"
            name="brandModel"
            rules={[{ required: true, message: "请输入品牌型号" }]}
          >
            <Input placeholder="请输入品牌型号" type="text" />
          </FormItem>
          <FormItem
            label="车辆类型"
            name="vehicleType"
            rules={[{ required: true, message: "请输入车辆类型" }]}
          >
            <Input placeholder="请输入车辆类型" type="text" />
          </FormItem>
          <FormItem
            label="车辆所有人"
            name="name"
            rules={[{ required: true, message: "请输入车辆所有人" }]}
          >
            <Input placeholder="请输入车辆所有人" type="text" />
          </FormItem>
          <FormItem
            label="核载人数"
            name="ratedCapacity"
            rules={[{ required: true, message: "请输入核载人数" }]}
          >
            <Input placeholder="请输入核载人数" type="text" />
          </FormItem>
          <Row>
            <Col className="font-bold">身份证</Col>
          </Row>
          <div className="driving">
            <div className="driving_img">
              {!idCardFront ? (
                <div className="driving_name">身份证人像面</div>
              ) : (
                ""
              )}
              {idCardFront ? (
                <>
                  <div
                    className="clear_btn"
                    onClick={() => handleClearIdcar("idFront")}
                  >
                    <Close />
                  </div>
                  <Image
                    className="car_info"
                    src={idCardFront}
                    onClick={() => {
                      handleImage(idCardFront);
                    }}
                  />
                </>
              ) : (
                <Image
                  className="car_info"
                  src={CardFront}
                  onClick={() =>
                    handleImageSelectOcr(setIdCardFront, "idFront")
                  }
                />
              )}
            </div>
            <div className="driving_img">
              {!idCardBack ? (
                <div className="driving_name">身份证国徽面</div>
              ) : (
                ""
              )}

              {idCardBack ? (
                <>
                  <div
                    className="clear_btn"
                    onClick={() => handleClearIdcar("idBack")}
                  >
                    <Close />
                  </div>
                  <Image
                    className="car_info"
                    src={idCardBack}
                    onClick={() => {
                      handleImage(idCardBack);
                    }}
                  />
                </>
              ) : (
                <Image
                  className="car_info"
                  src={CardBack}
                  onClick={() => handleImageSelectOcr(setIdCardBack, "idBack")}
                />
              )}
            </div>
          </div>
          <FormItem
            label="真实姓名"
            name="realName"
            rules={[{ required: true, message: "请输入真实姓名" }]}
          >
            <Input placeholder="请输入真实姓名" type="text" />
          </FormItem>
          <FormItem
            label="身份证号"
            name="identityNumber"
            rules={[{ required: true, message: "请输入身份证号" }]}
          >
            <Input placeholder="请输入身份证号" type="text" />
          </FormItem>
          <FormItem
            label="联系地址"
            name="contactAddress"
            rules={[{ required: true, message: "请输入联系地址" }]}
          >
            <TextArea style={{ height: "52px" }} placeholder="请输入联系地址" />
          </FormItem>
          {params.sellerType === "company" && (
            <div>
              <Row>
                <Col className="font-bold">营业执照</Col>
              </Row>
              <div className="driving">
                <div className="driving_img">
                  {!businessLicenseImage ? (
                    <div className="driving_name">营业执照</div>
                  ) : (
                    ""
                  )}
                  {businessLicenseImage ? (
                    <>
                      <div
                        className="clear_btn"
                        onClick={() =>
                          handleClearBusiness("businessLicenseImage")
                        }
                      >
                        <Close />
                      </div>
                      <Image
                        className="car_info"
                        src={businessLicenseImage}
                        onClick={() => {
                          handleImage(businessLicenseImage);
                        }}
                      />
                    </>
                  ) : (
                    <Image
                      className="car_info"
                      src={business}
                      onClick={() =>
                        handleImageSelect(
                          setBusinessLicenseImage,
                          "businessLicenseImage"
                        )
                      }
                    />
                  )}
                </div>
              </div>
            </div>
          )}
          {params.sellerType === "company" && (
            <div>
              <Row>
                <Col className="font-bold">授权委托书</Col>
              </Row>
              <div className="driving">
                <div className="driving_img">
                  {!willingness ? (
                    <div className="driving_name">授权委托书</div>
                  ) : (
                    ""
                  )}
                  {willingness ? (
                    <>
                      <div
                        className="clear_btn"
                        onClick={() => handleClearBusiness("willingness")}
                      >
                        <Close />
                      </div>
                      <Image
                        className="car_info"
                        src={willingness}
                        onClick={() => {
                          handleImage(willingness);
                        }}
                      />
                    </>
                  ) : (
                    <Image
                      className="car_info"
                      src={business}
                      onClick={() =>
                        handleImageSelect(setWillingness, "willingness")
                      }
                    />
                  )}
                </div>
              </div>
            </div>
          )}
          <div>
            <Row>
              <Col className="font-bold">汽车登记证书</Col>
            </Row>
            <div className="driving">
              <div className="driving_img">
                {!vehicleRegistration ? (
                  <div className="driving_name">汽车登记证书</div>
                ) : (
                  ""
                )}
                {vehicleRegistration ? (
                  <>
                    <div
                      className="clear_btn"
                      onClick={() => handleClearBusiness("vehicleRegistration")}
                    >
                      <Close />
                    </div>
                    <Image
                      className="car_info"
                      src={vehicleRegistration}
                      onClick={() => {
                        handleImage(vehicleRegistration);
                      }}
                    />
                  </>
                ) : (
                  <Image
                    className="car_info"
                    src={business}
                    onClick={() =>
                      handleImageSelect(
                        setVehicleRegistration,
                        "vehicleRegistration"
                      )
                    }
                  />
                )}
              </div>
            </div>
          </div>
        </Form>
      </Row>
    </View>
  );
}

function CarInfo() {
  return (
    <View className="car-info">
      <DrivingLicense />
    </View>
  );
}

export default CarInfo;
